<template>
    <div class="common-layout">
        <el-table :data="state.data" height="900" 
        :cell-class-name="tableCellClassName"
        @sort-change="sortChange"
        @cell-click="cellClick"
        :default-sort="state.sort"
        style="width: 100%">
            <el-table-column prop="date" label="date" width="180"/>
            <el-table-column prop="source" label="来源" width="180"/>
            <el-table-column prop="tag" label="tag" width="180">
                <template #default="scope">
                    <to-stock-detail :stock="scope.row.tag" />
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="800"/>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue';
import { getSessionStorage, setSessionStorage } from '@/utils/help';
import ToStockDetail from '../ToStockDetail.vue';
import { getLastedArticle } from '@/service/article';
import type { LastedArticleData, ArticleData } from '../../service/article';
import type { LastedArticleRetData } from '../../service/type';

const baseKey = "wugu"
const selectKey = baseKey + "Select"
const sortPropKey = baseKey + "SortProp"
const sortOrderKey = baseKey + "SortOrder"

const state = reactive<LastedArticleRetData>({
    sourceSelected: '',
    rawData: [],
    data: [],
    selected: getSessionStorage(selectKey) || '全部',
    sort: { 
        prop: getSessionStorage(sortPropKey) || '' , 
        order: getSessionStorage(sortOrderKey) || '' 
    }
})

getLastedArticle().then( (res: LastedArticleData)  => {
    state.rawData = res.data
    state.data = res.data
})

const sortChange = (column: { prop: any; order: any; }, prop: any, order: any) => {
    setSessionStorage(sortPropKey, column.prop)
    setSessionStorage(sortOrderKey, column.order)
}

const cellClick = (row: { [x: string]: any; }, column: { property: any; }, cell: any, event: any) => {
    let columnProperty = column.property
    if (['source'].includes(columnProperty)) {
        let val = row[columnProperty]
        if (state.sourceSelected != ""  &&  state.sourceSelected == val) {
            state.sourceSelected = ""
            state.data = state.rawData
        } else {
            state.sourceSelected = val
            state.data = state.rawData.filter(item => item[columnProperty] == val)
        }
    }
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let  columnProperty = column.property
    let v = row[columnProperty]

    if (["title"].includes(columnProperty)) {
        if (v.includes("清仓")) {
            return 'lt0-cell'
        }
        if (v.includes("建仓")) {
            return 'roe-gt15-cell'
        }
        if (v.includes("加仓")) {
            return 'lplt10-cell'
        }
    }
    return ''
}
</script>

<style>
</style>